// 匹配动画弹窗

import { useRequest } from 'ahooks';
import { Button, Flex, Modal } from 'antd';
import { useEffect, useState } from 'react';
import { useIntl } from 'umi';

import match from '@/assets/match.gif';
import up from '@/assets/up.png';
import { getMatchNumber } from '@/services/center';
import { formatNumber } from '@/utils';
type Props = {
  visible: boolean;
  handleCancel: () => void;
  handleOk: () => void;
};
let timer: NodeJS.Timeout | null = null;
let timer1: NodeJS.Timeout | null = null;
const MatchAnimationModal: React.FC<Props> = ({ visible, handleCancel, handleOk }) => {
  const intl = useIntl();
  const [number, setNumber] = useState(0);
  const [time, setTime] = useState(0);

  const [index, setIndex] = useState(0);
  const { run, data } = useRequest(() => getMatchNumber(), {
    manual: true,
  });
  // 获取随机值
  const getRandomInteger = (min: number, max: number) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  const { matchCount, totalCount } = data?.data || {};
  useEffect(() => {
    if (visible && data) {
      const { matchCount } = data?.data;

      // 匹配数量
      timer1 = setInterval(
        () =>
          setNumber((t) => {
            const val = Math.min(t + getRandomInteger(1, 5), matchCount);

            if (val == matchCount && time != 4) {
              return t;
            }
            if (time == 4) {
              return matchCount;
            }
            return val;
          }),
        1000,
      );
    }
  }, [visible, data, time]);
  useEffect(() => {
    if (data) {
      // 时间
      timer = setInterval(() => setTime((t) => t + 1), 1000);
    }
  }, [visible, data, run]);
  useEffect(() => {
    if (visible) {
      run();
    }
  }, [visible, run]);

  useEffect(() => {
    if (number == matchCount) {
      setTimeout(() => {
        clearInterval(Number(timer1));
        clearInterval(Number(timer));
      }, 0);
      // 跳转
      setTimeout(() => {
        setIndex(1);
      }, 200);
    }
  }, [number, matchCount]);

  return (
    <Modal
      zIndex={9999}
      footer={false}
      width={664}
      maskClosable={false}
      closable={false}
      onCancel={handleCancel}
      open={visible}
      centered
      destroyOnClose
      styles={{
        content: {
          background: 'linear-gradient(180deg, #D8ECFF 0%, #FFFFFF 36.94%)',
          padding: `${index == 0 ? 65 : 0}px 0 59px 0`,
        },
      }}
    >
      <Flex justify="center" align="center" style={{ flexDirection: 'column' }}>
        {index == 0 ? (
          <>
            <div
              style={{ color: '#003087', fontSize: 26, fontWeight: 700, margin: '0px 0 10px 0' }}
            >
              {intl.formatMessage({ id: 'home.match_way' })}
            </div>
            <div>
              <img src={match} width={135} height={135} />
            </div>
            <div style={{ color: '#003087', fontSize: 18, margin: '30px 0 12px 0' }}>
              {intl.formatMessage(
                { id: 'home.time' },
                {
                  time: <span style={{ color: '#FF8F00', fontWeight: 700 }}>{time}s</span>,
                  total: totalCount || 0,
                  num: <span style={{ color: '#FF8F00' }}>{number || 0}</span>,
                },
              )}
            </div>
            <div style={{ color: '#003087', fontSize: 18, fontWeight: 700 }}>
              {intl.formatMessage({ id: 'home.compare' })}
            </div>
            <div
              style={{
                color: '#003087',
                fontSize: 18,
                fontWeight: 700,
                marginTop: 64,
                padding: '14px 160px',
                textAlign: 'center',
                background:
                  'linear-gradient(90deg, rgba(238, 247, 255, 0) 0%, #EEF7FF 50%, rgba(238, 247, 255, 0) 100%)',
              }}
            >
              {intl.formatMessage({ id: 'home.loan_rate' })}
            </div>
          </>
        ) : (
          <div style={{ padding: '0 0 12px 0', textAlign: 'center' }}>
            <Flex
              align="center"
              justify="center"
              style={{
                background: `url(${require('@/assets/light.png')})`,
                minWidth: 567,
                paddingTop: 82,
                backgroundSize: 'cover',
              }}
            >
              <Flex style={{ fontWeight: 700, color: '#ff6600', fontSize: 46 }}>
                {intl.formatMessage({ id: 'home.congratulations' })}
              </Flex>
            </Flex>
            <div
              style={{ color: '#101010', fontSize: 30, margin: '10px 0 48px 0', fontWeight: 700 }}
            >
              {intl.formatMessage({ id: 'home.suc_match' }, { num: matchCount })}
            </div>
            <div style={{ fontSize: 18, color: '#003087' }}>
              {intl.formatMessage(
                { id: 'home.analysis' },
                {
                  info: (
                    <span style={{ fontWeight: '700' }}>
                      {intl.formatMessage(
                        { id: 'home.done' },
                        { num: <span style={{ color: '#FF8F00' }}>{totalCount}</span> },
                      )}
                    </span>
                  ),
                },
              )}
            </div>
            <div
              style={{
                background: '#F3F9FF',
                padding: '16px',
                borderRadius: 20,
                margin: '17px auto 0',
                width: 490,
              }}
            >
              <Flex justify="space-around" align="center">
                <Flex gap={8} style={{ flexDirection: 'column' }} align="center" justify="center">
                  <div style={{ color: '#003087', fontSize: 20 }}>
                    HK${formatNumber(1800000000, false)}
                  </div>
                  <div style={{ color: '#333', fontSize: 16 }}>
                    {intl.formatMessage({ id: 'home.total_limit' })}
                  </div>
                </Flex>
                <Flex gap={8} style={{ flexDirection: 'column' }} align="center" justify="center">
                  <Flex gap={6} align="baseline" style={{ color: '#003087', fontSize: 20 }}>
                    <img src={up} height={14} />
                    <div>95%</div>
                  </Flex>
                  <div style={{ color: '#333', fontSize: 16 }}>
                    {intl.formatMessage({ id: 'home.suc_rate' })}
                  </div>
                </Flex>
              </Flex>
            </div>

            <Button
              type="primary"
              className="match_btn"
              style={{ fontSize: 18 }}
              onClick={handleOk}
            >
              {intl.formatMessage({ id: 'home.check_now' })}
            </Button>
          </div>
        )}
      </Flex>
    </Modal>
  );
};

export default MatchAnimationModal;
